<template>
    <div class="cd-view">

        <div class="cd-box">
            <img class="img2" :src="src">
            <img class="img1" src="../../../../assets/main/bottem/cd.png">
        </div>
        <div class="changzhen-box">
            <img :class="(isPlay?'active':'')" src="../../../../assets/main/bottem/changzhen.png">
        </div>

    </div>
</template>

<script>
import {useStore} from "vuex";
import {computed} from "vue";
export default {
    name: "cdBox",
    props:['src'],
    setup() {
        let store = useStore()
        let isPlay = computed(()=>store.state.playerStore.isPlay)

        return {
            isPlay
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../../style";

@keyframes cdPlay {
    from {
        transform: rotate(0deg);
        transition-timing-function: linear;
    }

    to {
        transform: rotate(360deg);
        transition-timing-function: linear;
    }
}

.cd-view {
    width: 100%;
    height: 100%;
    display: flex;
    .cd-box {
        .inner-pos(center);
        position: relative;
        width: 450px;
        height: 600px;
        animation: cdPlay linear 10s infinite;
        .img1 {
            position: absolute;
            width: 400px;
            height: 400px;
        }
        .img2 {
            position: absolute;
            width: 132px;
            height: 132px;
        }
    }


    .changzhen-box {
        width: calc(100% - 450px);
        height: 600px;
        img {
            width: 100%;
            height: auto;
            transition: 300ms ease-in-out;
            transform-origin:73px 20%;
            &.active {
                transform: rotate(30deg);
                transform-origin:73px 20%;
            }
        }
    }
}


</style>